<script setup lang="ts">
import { ElRow } from 'element-plus';
import { type ChessItem } from '@/utils/chess';
import CenterLayout from '@/components/CenterLayout.vue';
import ChessItemView from './chess-view/ChessItemView.vue';
defineProps<{
  content: ChessItem[][];
  next?: ChessItem;
}>();
const emit = defineEmits<{
  (event: 'put', position: [number, number]): void;
}>();
</script>

<template>
  <CenterLayout>
    <div>
      <ElRow v-for="[row, line] of content.entries()" :key="row">
        <div v-for="[col, item] of line.entries()" :key="col">
          <ChessItemView
            :content="item"
            :next="next"
            @put="emit('put', [row, col])"
          ></ChessItemView>
        </div>
      </ElRow>
    </div>
  </CenterLayout>
</template>
